import { ref, onMounted, onUnmounted } from 'vue';

export const isFullscreen = ref(false);
type CallbackFunction = (hasFullscreen: boolean) => void;

export function useFullscreen(targetRef: Ref<HTMLElement | null>) {
  const enterFullscreen = () => {
    if (targetRef.value) {
      if (targetRef.value.requestFullscreen) {
        targetRef.value.requestFullscreen();
      } else if (targetRef.value.mozRequestFullScreen) {
        targetRef.value.mozRequestFullScreen();
      } else if (targetRef.value.webkitRequestFullscreen) {
        targetRef.value.webkitRequestFullscreen();
      }
      addFullscreenchangeEventListener((isfull: boolean) => {
        isFullscreen.value = isfull;
        if (!isfull) {
          removeFullscreenchangeEventListener();
        }
      });
    }
  };

  const exitFullscreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  };

  onMounted(() => {
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
  });

  onUnmounted(() => {
    document.removeEventListener('fullscreenchange', handleFullscreenChange);
    document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
    document.removeEventListener(
      'webkitfullscreenchange',
      handleFullscreenChange
    );
  });

  const handleFullscreenChange = () => {
    isFullscreen.value =
      document.fullscreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen;
  };
  // 检查是否处于全屏状态
  function isFullscreens(): boolean {
    return !!(
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.msFullscreenElement
    );
  }
  function fullscreenChangeHandler(cb: CallbackFunction) {
    if (isFullscreens()) {
      console.log('进入全屏');
      cb(true);
    } else {
      console.log('退出全屏');
      cb(false);
    }
  }
  let EVENT: any = null;
  const addFullscreenchangeEventListener = (cb: CallbackFunction) => {
    EVENT = () => {
      fullscreenChangeHandler(cb);
    };

    document.addEventListener('fullscreenchange', EVENT);
    document.addEventListener('webkitfullscreenchange', EVENT);
    document.addEventListener('msfullscreenchange', EVENT);
  };

  const removeFullscreenchangeEventListener = () => {
    if (EVENT) {
      return;
    }
    document.addEventListener('fullscreenchange', EVENT);
    document.addEventListener('webkitfullscreenchange', EVENT);
    document.addEventListener('msfullscreenchange', EVENT);
  };
  return {
    isFullscreen,
    enterFullscreen,
    exitFullscreen,
    addFullscreenchangeEventListener,
    removeFullscreenchangeEventListener,
  };
}

export default useFullscreen;
